<template>
	<view class="login" :style="'height:'+screeHeight+'rpx;'">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true">
			<image class="avatar" :src="avatarUrl"></image>
			<view class="getAvatar">点击获取头像</view>
		</button>
		<view class="nickName">
			<view class="nickName-text">昵称：</view>
			<input type="nickname" class="weui-input" :value="nickName" placeholder="请输入昵称" @change="getNickName" />
		</view>
		<view class="illustrate">
			<view>申请获取以下权限</view>
			<view class="illustrate-text">为了区分不同客户信息将获得您的公开信息（昵称、头像、地区等）</view>
		</view>
		<view class="empower" @click="loginin">授权登录</view>
		<view class="unempower" @click="cancelEmpower">暂不授权</view>
	</view>
</template>

<script>
	import $http from "@/component/commen/api/request.js"
	export default {
		data() {
			return {
				avatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
				screeHeight: 0, //当前屏幕高度
				nickName: "", //昵称
				userinfo: {}, //用户信息
			};
		},
		mounted() {
			this.getsystemInfo()
			console.log(this.screeHeight)
		},
		methods: {
			getNickName(e) { //监听输入框获取昵称
				this.nickName = e.detail.value
			},
			onChooseAvatar(e) { //获取用户头像
				// console.log(e)
				this.avatarUrl = e.detail.avatarUrl
			},
			getsystemInfo() { //获取当前屏幕信息
				// 设备系统信息
				let sysInfo = uni.getSystemInfoSync()
				// 机型适配比例系数
				let scaleFactor = 750 / sysInfo.windowWidth
				// 当前机型屏幕高度
				this.screeHeight = sysInfo.windowHeight * scaleFactor

			},
			loginin() { //点击登录按钮
				let _this = this
				if (this.avatarUrl ==
					"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
				) {
					return uni.showToast({
						title: "请选择头像",
						icon: "none"
					})
				}
				if (this.nickName == "") {
					return uni.showToast({
						title: "请输入昵称",
						icon: "none"
					})
				}
				uni.login({
					desc: "用于完善会员资料",
					success(res) {
						console.log(res)
						// https://huishou.68699.cn/app/index.php?i=2&t=0&v=2.7.4&from=wxapp&c=auth&a=session&do=openid&m=wjyk_recycle&sign=4aadd1e9356cdf2baf30c80730e801be&code=
						$http({//使用code请求得到openid
							url: `?i=2&t=0&v=2.7.4&from=wxapp&c=auth&a=session&do=openid&m=wjyk_recycle&sign=4aadd1e9356cdf2baf30c80730e801be`,
							method: "get",
							data: {
								code: res.data.code
							}
						}).then((data) => {
							console.log(data)
							uni.setStorageSync("openid", data.openid)
							uni.setStorageSync("sessionid", data.sessionid)
							uni.setStorageSync("unionid", data.userinfo.unionid)
							uni.setStorageSync("uId", data.userinfo.uid)
							uni.getUserInfo({
								success: (event => {
									console.log(event)
									$http({
										url: "?i=2&t=0&v=2.7.4&from=wxapp&c=auth&a=session&do=userinfo&&state=we7sid-5973a0fedf7ca18a31ef010480fa5663&m=wjyk_recycle&sign=72021e7381c874b57e42416dd94cef39",
										data: {
											signature: event.signature,
											rawData: event.rawData,
											iv: event.iv,
											encryptedData: event.encryptedData
										},
										header: {
											"content-type": "application/x-www-form-urlencoded"
										},
										cachetime: 0,
										method: "post"
									}).then(result => {
										console.log(result)
										// ?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=user&op=register&state=we7sid-b5a201162f099512e8d5674fed54a17c&m=wjyk_recycle&sign=de4824853fdf5eccaec6bcfeb7393464
										_this.getUId()
									})
								})
							})
						})
					}
				})
				// 对接登录接口
				//存储用户信息
				// $http({

				// }).then((res)=>{
				// 	console.log(res)
				// })
			},
			getUId() {
				var that = this
				$http({
					url: `?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=user&op=register&state=we7sid-b5a201162f099512e8d5674fed54a17c&m=wjyk_recycle&sign=de4824853fdf5eccaec6bcfeb7393464`,
					method: "get",
					data:{
						pid:uni.getStorageSync("pid"),
						openid:uni.getStorageSync("openid"),
						avatar:that.avatarUrl,
						nickname:that.nickName,
						unionid:uni.getStorageSync("unionid")
					}
				}).then((res) => {	
					console.log("最终数据：",res)
					// if (res.id == undefined) {
					// 	return console.log("没有")
					// }
					// console.log("cccccc", res)
					// uni.setStorageSync("userinfo", res)
				})
			},
			cancelEmpower() { //点击暂不授权
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		// border: 1px solid #000;
		// height: 100%;
		font-size: 29rpx;
		padding: 0 40rpx;
		background: #fff;

		.avatar-wrapper {
			padding-top: 40rpx;
			border: 0;
			background: #fff;

			.avatar {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}

			.getAvatar {
				font-size: 28rpx;
				width: 100%;
				text-align: center;
			}
		}

		.nickName {
			margin-top: 20rpx;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #eee;
			border-top: 2rpx solid #eee;
			display: flex;
			align-items: center;

			.nickName-text {
				width: 20%;
			}

			// .weui-input{
			// 	text-align: center;
			// }
		}

		.illustrate {
			margin-top: 40rpx;
			font-size: 29rpx;

			.illustrate-text {
				font-size: 29rpx;
				color: #b8b8b8;
				margin-top: 16rpx;
			}
		}

		.empower {
			background: #02bb8e;
			border-radius: 36rpx;
			margin-top: 40rpx;
			// height: 8vh;
			padding: 22rpx;
			// border: 1px solid #f00;
			text-align: center;
			color: #fff;
			// line-height: 8vh;
			font-size: 36rpx;
		}

		.unempower {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			color: #00063b;
			margin-top: 17rpx;
		}
	}
</style>